<template>
	<view class="positioning-container">
		<view class="uni-common-mt">
			<view>
				<map ref="map" id="map" @callouttap="callouttap" :show-location="true" :latitude="latitude" :longitude="longitude" :markers="markers" :polyline="polyline" :scale="scale" @markertap="markertap">
					<cover-view class="cover1">
						<cover-view class="cover_nav">当前人数：{{}}人</cover-view>
					</cover-view>
					<cover-view class="cover">
						<cover-view class="cover_con">
							<cover-view class="cover_con_div">
								<cover-view class="cover_con_name">设备编号：{{nowPackeNo}}</cover-view>
								<cover-view class="cover_con_name">设备状态：{{}}</cover-view>
								<cover-view class="cover_con_name">设备信号：{{}}</cover-view>
								<cover-view class="cover_con_name">设备距离：{{}}</cover-view>
								<cover-view class="cover_con_name">设备位置：{{nowlongitude}}, {{nowlatitude}}</cover-view>
							</cover-view>
							<cover-view class="cover_con_right">
								<cover-view class="cover_con_p">{{}}</cover-view>
								<cover-view class="sphere-progress">
									<vus-sphere-progress :percent="percent"></vus-sphere-progress>
								</cover-view>
							</cover-view>
						</cover-view>
					</cover-view>
				</map>
			</view>
		</view>
	</view>
</template>

<script>
	import route from '@/components/draw-map/draw-map.js';
	import vusSphereProgress from '@/components/vus-sphere-progress/vus-sphere-progress.vue';
	export default {
		components: {vusSphereProgress},
		data() {
			return {
				latitude: 30.689514,
				longitude: 104.052012,
				markers: [],
				polyline: [],
				scale: 15,
				radius:'',
				bannerShow:true,
				percent: 0,
				nowPackeNo: '',
				nowlatitude: '',
				nowlongitude: ''
			}
		},
		onLoad(option) {
			this.longitude = this.$utils.getData("centerX")
			this.latitude = this.$utils.getData("centerY")
		},
		onShow() {
			this.getTeamData()
		},
		methods: {
			/**
			 * 点击mark 
			 */
			callouttap (e) {
				let res = this.markers.filter(item => item.id === e.detail.markerId)[0]
				this.nowPackeNo = res.title
				this.nowlatitude = res.latitude
				this.nowlongitude = res.longitude
			},
			/**，
			 * 获取设备列表
			 */
			getTeamData () {
				this.$myRuquest({
					url: "/jsl/user/DeviceLocationById",
					data: {
						"requestParams": {
							"procedure": {
								"p_uid": this.$utils.getData("p_uid")
							}
						}
					}
				}).then(res => {
					this.userData = res
					this.$utils.setData('userdata', res)
					let resmarks = []; // 图标的集合
					res.forEach(item => {
						let mar = this.createMarker(item);
						resmarks.push(mar)
					})
					this.allperson = res.length
					let userobj = []
					this.markers.forEach(item => {
						if (item.id === 0) {
							userobj.push(item)
						}
					})
					this.markers = userobj.concat(resmarks)
					this.getNowLocation()
				}).catch()
			},
			/**
			 * 获取当前位置
			 */
			getNowLocation() {
				if (this.markers.length) {
					this.longitude = this.markers[0].longitude
					this.latitude = this.markers[0].latitude
					// uni.createMapContext("map", this).moveToLocation({  
					// 	longitude: this.longitude,  
					// 	latitude: this.latitude
					// })
				} else {
					uni.getLocation({
						type: 'gcj02',
						success: (res) => {
							this.centerX = res.longitude
							this.centerY = res.latitude
							// uni.createMapContext("map", this).moveToLocation({  
							// 	longitude: this.centerX,  
							// 	latitude: this.centerY
							// })
						}
					})
				}
				if (getCurrentPages()[getCurrentPages().length - 1].route=== 'pages/eagle-eye/eagle-eye') {
					setTimeout(() => {
						this.getTeamData()
					}, 3000)
				}
			},
			/**
			 * 还有地图标识，可以在name上面动手
			 */
			createMarker(point) {
				let latitude = point.latitude;
				let longitude = point.longitude;
				let marker = {
					id: Number(point.id),
					latitude: latitude,
					longitude: longitude,
					title: point.package_no,
					iconPath: '../../static/images/dingwei.png',
					width: 20,
					height: 32,
					callout: {
						content: point.package_no,
						color: '#fff',
						fontSize: 12,
						borderRadius: 2,
						bgColor: '#21C885',
						padding: 2,
						display: 'ALWAYS',
						textAlign: 'center'
					}
				}
				return marker;
			},
			radiusInput(e){
			},
			 mapMarkers(){
				this.markers = [
					// {
					// 	id:1001,
					// 	longitude: '104.052012',
					// 	latitude: '30.689514',
					// 	title: '小新',
					// 	iconPath: 'http://api.myphp.vip/logo.png',
					// 	width: '73rpx',
					// 	height: '87rpx',
					// 	callout: {
					// 		content: '19892556748',
					// 		color: '#9bf',
					// 		fontSize: '30rpx',
					// 		bgColor: 'red',
					// 		padding: '30rpx',
							
					// 	},
					// 	label: {
					// 		content: '中国石化加油站 686m',
					// 		color:'#fff',
					// 		padding: '10',
					// 		textAlign: 'center',
					// 		borderColor: 'red',
					// 		bgColor: '#ccc',
					// 		x: '350px',
					// 		y: '0',
					// 		opacity:'0.4'
					// 	}
					// }
				]
			},
			changeBack:function(d){
			},
		}
	}
</script>
		
<style lang="scss">
	map {
		width: 100%;
		height: 100vh;
	}
	.cover{
		display: flex;
		position: fixed;
		bottom: 0;
		left:24rpx;
		width: 94%;
		background:rgba(252, 255, 254, 1);
		box-shadow: 0px 0px 10rpx 0px rgba(252, 255, 254, 0.5);
		border-radius: 16rpx;
		display: block;
	}
	.cover1{
		display: flex;
		position: fixed;
		top: 0;
		left: 0;
		line-height: 60rpx;
		height: 60rpx;
		width: 100%;
		background: rgba(33, 200, 133, 1);
		display: block;
	}

	.cover_nav{
		padding: 0 25rpx;
		font-size: 24rpx;
		line-height: 60rpx;
		font-weight: 500;
		color: #FFFFFF;
		text-align: center;
	}
	.cover_con{
		width: 100%;
		display: flex;flex-direction:row; flex-wrap:wrap;justify-content:space-between; display: -webkit-flex;
	}
	.cover_con_div{
       margin-left: 35rpx;
	   padding: 10rpx 0 ;
	}
	.cover_con_name{
		line-height: 60rpx;
		font-size: 26rpx;
		font-weight: 500;
		color: #2CB47D;
		
	}
	.cover_con_name image{
		width: 60rpx;height: 60rpx;top:18rpx;
	}
	.cover_con_right{
		margin-right:35rpx;
		width: 124rpx;
	}
	.cover_con_p{
		padding: 52rpx 0 17rpx;
		font-size: 26rpx;
		font-weight: 500;
		color: #2CB47D;
		text-align: center;
	}
	.sphere-progress{
		width: 124rpx;
	}
</style>
		
